<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <script src="/delivery/resources/art-template.js"></script>
    <script src="/delivery/resources/jquery.3.3.1.min.js"></script>
    <link rel="stylesheet" href="/delivery/resources/bootstrap/bootstrap.css">
    <script src="/delivery/resources/bootstrap/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/delivery/resources/raty/lib/jquery.raty.css">
    <script src="/delivery/resources/raty/lib/jquery.raty.js"></script>

    <style>
        .highlight{
            color: white !important;
        }

        a:active{
            text-decoration:none !important;
        }
        .container {
            padding: 0px;
            margin: 0px;
        }
        .row {
            padding: 0px;
            margin: 0px;
        }
        .scroll1{
            width:100%;
            overflow-x:scroll;
            overflow-y:hidden;
            white-space:nowrap;
        }
        .scroll1 a{
            width:80px;
            display:inline-block;
        }
        .biaoqian{
            height: 20px;
            width: 105px;
            text-align: center;
            font-size: 5px;
            color: orangered;
            background-color: #f1b0b7;
            border: 0px solid red;
            border-radius: 5px;
        }
        ::-webkit-scrollbar{display: none;}
    </style>
    <#--模板tp1-->
    <script type="text/html" id="tp1">
        <div style="position: relative;width: 90%;background-color: white;margin: 0 auto;border-radius: 10px;padding-bottom: 10px" class="row <#--mt-2--> pt-2">
            <a href="/delivery/book/{{bookId}}" style="color: inherit;">
                <div class="col-4 <#--mb-2 pr-2-->" style="display:inline-block;">
                    <img <#--class="img-fluid"--> style="height: 100px;width: 100px;border-radius: 5px" src="/delivery/{{cover}}">
                </div>
                <div class=" <#--mb-2--> <#--pl-0-->" style="width: 140px;display: inline-block;position: absolute;top: 10px;right: 60px;">
                    <h6 class="text-truncate" style="font-weight: bold;width: 110px;">{{bookName}}</h6> <#--文本溢出替换成省略号-->
                    <p style="padding:0px;margin: 0px;">
                        <span class="<#--mt-1 ml-2-->" style="color: red">{{evaluationScore}}分</span>
                        <span class="<#--mt-1 ml-2-->">共{{evaluationQuantity}}人评价</span>
                    </p>
                    <div class="juli">{{author}}</div>
                    <div class="mb-1 biaoqian">{{subTitle}}</div>
                </div>
            </a>
        </div>


        <hr style="margin: 0px 2px 0px 0px;padding: 0px">
    </script>
    <script>
        //初始化星形图片目录
        $.fn.raty.defaults.path="/delivery/resources/raty/lib/images"
        function loadNext(isFirst){
            if(isFirst==true){
                $('#bookList').html("")
                /*$('#milkList').html("")*/
                //如果是第一页，页码设置为1
                $('#nextPage').val(1);
            }
            var nextPage=$('#nextPage').val()//如果是第一页，则取出的值是1
            //得到辅助分页类的值
            var categoryId=$('#categoryId').val();
            var order=$('#order').val();
            $.ajax({
                url:"mysavefunc",
                data:{"page":nextPage,"categoryId":6,"order":order},
                type:"get",
                dataType:"json",
                success:function (info) {
                    var bookList = info.records;
                    for (var i = 0; i < bookList.length; i++) {
                        var book = bookList[i];
                        var html=template("tp1",book);
                        $('#bookList').append(html);
                    }
                    /*星形组件*/
                    $('.stars').raty({readOnly:true});
                    //如果当前页小于总页数，则将下一页nextPage的文本框的值改为：当前页+1
                    if(info.current<info.pages){
                        $('#nextPage').val(parseInt(info.current)+1)
                        //这里在分类和排序时使用，因为会发生else部分的隐藏，就看不到更多了
                        $('#btnMore').show()
                        $('#divNoMore').hide()
                    }else{
                        $('#btnMore').hide()
                        $('#divNoMore').show()
                    }
                }
            })
        }

        $(function () {
            loadNext(true);//第一次，首页打开时
            $('#btnMore').click(function () {
                loadNext();
            })
            //按类别，设置高亮
            $('.category').click(function () {
                //移除当前高亮
                $('.category').removeClass("highlight")
                //设置category类的样式为灰色
                $('.category').addClass('text-black-50')
                //设置当前点击的类对应的元素，为高亮
                $(this).addClass("highlight")

                //给辅助分页的div赋值
                //首先获取点击的类的值  data-category=""
                var categoryId=$(this).data("category");
                //辅助分页的表单赋值  <input type="hidden" id="categoryId" value="-1">
                $('#categoryId').val(categoryId);

                //既然点了美食，就想马上以category-3来看效果
                loadNext(true);
            })
            $('.order').click(function () {
                $('.order').removeClass("highlight")
                $('.order').addClass('text-black-50')
                $(this).addClass("highlight")

                //给辅助分页的div赋值  <input type="hidden" id="order" value="quantity">
                var order=$(this).data("order")   //data-order="quantity"
                $('#order').val(order);
                //既然点了排序，就想马上以点的排序规则来查询列表
                loadNext(true)
            })
        })
    </script>
</head>
<body>
<div class="container">
    <!-- 导航部分-->
    <nav class="navbar navbar-light <#--shadow--> mr-auto" style="background-color:#02B6FD;">
        <!-- 导航左logo -->
        <ul class="nav">
            <li class="nav-item">
                <a href="/delivery/">
                <img src="/delivery/resources/images/elemo.png" class="mt-1" style="width: 45px;" alt="">
                <span class="pl-2" style="font-size: 18px;font-weight: bold;margin-top: 3px;color: white">您的个人收藏</span>
                </a>
            </li>
            <li style="padding-left: 130px;padding-top: 10px;">
                <a href="/delivery/" style="color:white;">
                    <span>上一页</span>
                </a>
            </li>
        </ul>
    </nav>
    <#--蓝色边缘模糊图层-->
    <div style="height: 100%; background-color:#02B6FD;background: linear-gradient(180deg,#02B6FD,white)">
        <!-- 第一行 -->
        <div class="row <#--mt-2-->">

            <#--天气小组件-->
            <div class="tq">
                <img src="/delivery/resources/images/didian.png" style="width: 24px;display: inline-block;float:left;">
                <span style="float: left">您所在地区：</span>
                <iframe style="display: inline-block;margin-top: 3px;float:left;" scrolling="no" src="https://tianqiapi.com/api.php?style=ta&skin=orange" frameborder="0" width="250px" height="24" allowtransparency="true"></iframe>
            </div>

            <#--轮播图-->
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="/delivery/resources/images/lunbotu1.jpg" class="d-block" style="height: 190px;width: 400px;" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="/delivery/resources/images/lunbotu2.jpg" class="d-block" style="height: 190px;width: 400px;" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="/delivery/resources/images/lunbotu3.jpg" class="d-block" style="height: 190px;width: 400px;" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="/delivery/resources/images/lunbotu4.jpg" class="d-block" style="height: 190px;width: 400px;" alt="...">
                    </div>
                </div>
            </div>

            <#--分类-->
            <div class="col-8 mt-2">
                <span data-order="quantity" style="cursor:pointer" class="highlight font-weight-bold text-black-50 mr-3 order">按评价数</span>
                <span data-order="score" style="cursor:pointer" class="font-weight-bold text-black-50 order">按评分</span>
            </div>

        </div>



    <!--列表，由多行组成，每行有二个div列，div1占4列，div2占8列，共12格-->
    <div id="bookList"></div>
    <!--加载更多，即分页的按钮 -->
    <button style="visibility: hidden" type="hidden"  id="btnMore" class="btn btn-outline-primary btn-lg btn-block">
        点击加载更多
    </button>
    <div id="divNoMore" class="text-center text-black-50 mb-5" style="display: none">没有其他数据了</div>
    <!--辅助分页-->
    <div class="d-none">
        <input type="hidden" id="nextPage" value="2">
        <input type="hidden" id="categoryId" value="-1">
        <input type="hidden" id="order" value="quantity">
    </div>
    </div>
</div>
</body>
</html>

